<template>
  <div v-if="JSON.parse(projectInfo.projectStage).length > 0" class="content">
    <el-steps :active="currentStep" align-center finish-status="success">
      <el-step
        @click="handleActive(step)"
        v-for="step in tapSteps"
        :key="step.key"
      >
        <template #title>
          <div :class="{ active: step.key === activeIndex }">
            {{ step.value }}
          </div>
        </template>
      </el-step>
    </el-steps>

    <br />
    <component
      :is="steps[currentComponent].step"
      :projectInfo="projectInfo"
      :key="currentComponent"
    ></component>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";

const props = defineProps({
  projectInfo: {
    type: Object
  }
});

let projectInfo = ref(props.projectInfo);

// 批量导入组件
const modules = import.meta.globEager("./workSteps/*.vue");

const tapSteps = ref([]);
const steps = ref([]);

let currentStep = ref(0);
let activeIndex = ref(0);
let currentComponent = ref(0);

const processStatus = new Map([
  [1, "可研"],
  [2, "立项"],
  [3, "实施"],
  [4, "验收"],
  [5, "后评价"]
]);

const modulesArray = Object.values(modules).map(v => v.default);
modulesArray.forEach((item, index) => {
  steps.value.push({
    step: item,
    title: processStatus.get(index + 1)
  });
});

onBeforeMount(() => {
  const projectStep = JSON.parse(props.projectInfo.projectStage)
    .map(i => +i)
    .sort();
  tapSteps.value = projectStep.map(item => {
    return { key: item, value: processStatus.get(item) };
  });
  if (!props.projectInfo.stageStatus) {
    currentStep.value = 0;
    currentComponent.value = projectStep[0] - 1;
  } else {
    const currentIndex = projectStep.indexOf(+props.projectInfo.stageStatus);
    currentStep.value = currentIndex;
    currentComponent.value = +props.projectInfo.stageStatus - 1;
  }

  activeIndex.value = currentStep.value + 1;

  console.log(projectStep, currentStep.value, currentComponent.value);
});

const handleActive = item => {
  console.log(123, item);
  if (item.key > +props.projectInfo.stageStatus) {
    return false;
  }
  currentComponent.value = item.key - 1;
  activeIndex.value = item.key;
};
</script>

<style lang="scss" scoped>
.content {
  &:deep .el-step__title {
    font-size: 12px;
  }
  :deep .active {
    color: #f89c34 !important;
  }
  // 已完成配置
  &:deep .el-step__title.is-success {
    color: #000; // 中文字体颜色
    font-weight: 700;
    cursor: pointer;
  }
  &:deep .el-step__title.is-process {
    color: #000; // 中文字体颜色
    font-weight: 700;
    cursor: pointer;
  }
  &:deep .el-step__title.is-wait {
    color: #000; // 中文字体颜色
    cursor: not-allowed;
    // font-weight: 700;
  }
  &:deep .el-step__head.is-success {
    color: #fff; // 图标颜色
    .el-step__icon.is-text {
      border-color: #f89c34; // 圆圈边框
      background-color: #f89c34; // 圆框背景色
    }
    .el-step__line {
      background-color: #f89c34; // 已完成直线颜色
    }
  }

  // 正在进行中
  &:deep .el-step__head.is-process {
    color: #f89c34; // 图标颜色
    // color: red; // 图标颜色
    .el-step__icon.is-text {
      border-color: #f89c34; // 圆圈边框
      background-color: #fff; // 圆框背景色
    }
    .el-step__icon-inner {
      // display: none;
      width: 16px;
      height: 16px;
      background: #f89c34;
      border-radius: 50%;
    }
  }
  // 未执行
  &:deep .el-step__head.is-wait {
    // color: #f89c34; // 图标颜色
    // .el-step__icon.is-text {
    //   border-color: #f89c34; // 圆圈边框
    //   background-color: #fff; // 圆框背景色
    //
    height: 24px;
    .el-step__icon-inner {
      display: none;
    }
  }
}
</style>
